<template>
  <el-button :class="['btn', size, type]" @click="eventBtn" :disabled="disabled">{{ text }}</el-button>
</template>

<script>
export default {
  name: "index",
  methods: {
    eventBtn() {
      if (this.$listeners["dian"]) {
        this.$emit("dian");
      }
    },
  },
  props: {
    text: {
      type: String,
      require: true,
    },
    type: {
      type: String,
      require: false,
      default: "type-1",
    },
    size: {
      type: String,
      require: false,
      default: "default",
    },
    disabled: {
      type: Boolean,
      require: false,
      default: false,
    }
  },
};
</script>

<style scoped lang="scss">
// $btnColors: #5c6ffe #9292C1;
$btnColors: #1364ff #9292C1;
$sizeArr: (
  (
    cssName: small,
    width: 70px,
    height: 32px,
    fontSize: 12px,
  ),
  (
    cssName: default,
    width: 120px,
    height: 40px,
    fontSize: 14px,
  )
);

/* 按钮颜色 默认type-1 */
/* type-1、type-2... */
/* 边框按钮 border-1、border-2... */
@for $i from 1 through length($btnColors) {
  .btn.type-#{$i} {
    $color: nth($btnColors, $i);
    background: $color;
    color: #fff;
    border-radius: 3px;
    &:hover {
      background: lighten($color, 10%);
    }
    &:active {
      background: darken($color, 10%);
    }
    &:disabled {
      background: lighten($color, 20%);
      color: lighten($color, 40%);
    }
  }
  .btn.border-#{$i} {
    $color: nth($btnColors, $i);
    border: 1px solid $color;
    color: $color;
    background: white;
    &:hover {
      color: lighten($color, 10%);
    }
    &:active {
      color: darken($color, 10%);
    }
    &:disabled {
      color: lighten($color, 20%);
      background: lighten($color, 40%);
    }
  }
}

/* 按钮大小 */
@for $i from 1 through length($sizeArr) {
  $item: nth($sizeArr, $i);

  .#{map-get($item, cssName)} {
    height: map-get($item, height);
    font-size: map-get($item, fontSize);
  }
}
</style>
